<script setup lang="ts">
import { ref, nextTick, onMounted, onUnmounted,defineEmits, getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance();
import {useRouter} from 'vue-router'
const router = useRouter();
const emit = defineEmits(['changeHeaderCSS', 'changeLogTextColor']);
const changeLogTextColor = (flag: boolean) => {
  emit('changeLogTextColor', flag);

}
const changeHeaderCSS = (flag: boolean) => {
  emit('changeHeaderCSS', flag);
}

// import skrollr from "skrollr";
import Banner from "@/components/Banner.vue"
import CaseWorks from "@/components/CaseWorks.vue"
// 监听元素是否在可视区域内组件
import { useIntersectionObserver } from '@vueuse/core'
//调用这个函数useIntersectionObserver，里面传三个参数
const bannerUnderRef = ref();
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出\
const { } = useIntersectionObserver(
  bannerUnderRef,// target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }]: any) => {
    if (isIntersecting) {
      // 子组件监听进入可视区域调用父组件方法
      //进入可视区域
      changeHeaderCSS(false)
      if (browerWidth < 1200) {
        changeHeaderCSS(true)
      }
    } else {
      // 子组件监听移出可视区域调用父组件方法
      //移出可视区域
      changeHeaderCSS(true);
    }
  },
  // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
  // 默认是0.1。 值越大表示观察越不灵敏
  { threshold: 0.1 }
)
// // 视差滚动
// const skrollrobj = ref(null)
// onMounted(() => {
//   nextTick(() => {
//     skrollrobj.value = skrollr.init({
//       forceHeight: false,
//       smoothScrolling: true,
//       smoothScrollingDuration: 500,
//       easing: {
//         vibrate: function (p: number) {
//           return Math.sin(p * 10 * Math.PI);
//         },
//       },
//     });
//   })
// })
// onDeactivated(() => {
//   const instance = skrollr.get();
//   instance.destroy();
// })

const listBanner = ref([]);
const caseArray = ref(new Array);
const workCaseList = ref();
const bannerList = ref([])
const getBannerList = async () => {
  let result = await proxy.Request({
    url: "/banner/loadDataList"
  })
  if (!result) {
    return;
  }
  bannerList.value = result.data.list;
  for (let i = 0; i < bannerList.value.length; i++) {
    listBanner.value.push({
      img: bannerList.value[i].bannerImg,
      url: bannerList.value[i].caseId ? bannerList.value[i].caseId : "#",
      bannerColorBlack: bannerList.value[i].bannerColorBlack
    })
  }
}
getBannerList();
const getWorkCaseList = async () => {
  let result = await proxy.Request({
    url: "/workCase/loadDataList",
    params: {
      pageNo: 1,
      pageSize: 10000
    },
    showLoading: false
  })
  if (!result) {
    return;
  }
  workCaseList.value = result.data.list;
  for (let i = 0; i < workCaseList.value.length; i++) {
    let eee = workCaseList.value[i].workCaseCategoryList.map(s => { return s.id });
    caseArray.value.push({
      url: '/caseDetail/' + workCaseList.value[i].id,
      img: workCaseList.value[i].caseImg,
      p1: workCaseList.value[i].caseSlogan ? workCaseList.value[i].caseSlogan : workCaseList.value[i].caseClientName,
      p2: workCaseList.value[i].caseTitle,
      p3: workCaseList.value[i].caseContent,
      workCaseCategory: eee
    })
  }
}
getWorkCaseList();
const iconFlag = ref<boolean>(false);
const ChangeIconFlag = (flag: boolean) => {
  iconFlag.value = flag;
}
// 等比缩放
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
let bannerHeight = ref(browerWidth * 0.4)
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
const headerNav = ref(browerWidth > 1200);
const listenerReSize = ()=>{
  browerWidth = window.innerWidth;
  // 如果宽度小于1200,头部菜单变为图标
  if (browerWidth < 1200) {
    //头部菜单变为图标
    headerNav.value = false;
    changeHeaderCSS(true)
  } else {
    // 头部图标变为菜单
    headerNav.value = true;
    changeHeaderCSS(false)
  }
  bannerHeight.value = browerWidth * 0.4;
}
window.addEventListener('resize', listenerReSize);
const serviceBannerRef = ref();
let i = 0;
const serviceBannerImgArray = ref<string[]>(['https://dtxb.work/adsfsadfasdfasdf.jpg', 'https://dtxb.work/SADASDFASDFA.jpg', 'https://dtxb.work/ASDFASDF.jpg']);
onMounted(() => {
  nextTick(() => {
    if (headerNav.value && serviceBannerRef.value) {
      setInterval(() => {
        // 去掉这个判断就报错
        // 不知道为什么
        if (serviceBannerRef.value) {
          serviceBannerRef.value.style.backgroundImage = 'url( ' + serviceBannerImgArray.value[i] + ' )'
          i++;
          if (i == serviceBannerImgArray.value.length) {
            i = 0;
          }
        }
      }, 2500)
    }
  })
});
const ideaList = ref();
const ideaList2 = ref();
//调用后台接口得到idea数据
const getIdeaList = async () => {
  let result = await proxy.Request({
    url: "/idea/loadDataList",
    params: {
      pageNo: 1,
      pageSize: 6
    }
  })
  if (!result) {
    return;
  }
  ideaList.value = result.data.list.slice(0,3);
  ideaList2.value = result.data.list.slice(3,6)
}
getIdeaList();

onUnmounted(()=>{
  window.removeEventListener('resize',listenerReSize)
})
</script>




<template>
  <div>
    <!-- 页面banner -->
    <Banner :list-banner="listBanner" @changeLogTextColor="changeLogTextColor" :interval="8000" :auto-switch="true"
      v-if="headerNav && listBanner">
    </Banner>
    <!-- 页面banner -->
    <!-- <Banner :list-banner="listBanner" @changeLogTextColor="changeLogTextColor" :interval="8000" :set-height="500"
      :img-center="true" :auto-switch="true" v-if="!headerNav && listBanner">
    </Banner> -->
    <div ref="bannerUnderRef"></div>
    <!-- 简介 -->
    <div class="box">
      <div class="wrapper">
        <!-- 简介上部文字 -->
        <h3>
          <a class="douku-jianjie" >
            <img src="../assets/logo2.png" class="douku-jianjie-img" /> 抖酷设计 = 品牌咨询 + 品牌视觉 + 运营设计</a>
        </h3>
        <!-- 简介下部小文字 -->
        <div class="jieshao">
          <el-row class="row">
            <el-text class="show">我们尊重品牌的自然成长规律，一切都从品牌角度出发，并始终服务与核心需求。我们运用丰富的品牌战略策划实战经验，积极推动品牌的建立与成长。</el-text>
          </el-row>
          <el-row class="row">
            <el-text class="show">近年来，我们成功协助包含金风科技、中国核建、东方雨虹、赤峰黄金、京能集团、娃哈哈、中国石油大学、思科、恒源祥等行业龙头在内的数十家企业实现增长。</el-text>
          </el-row>
          <el-row class="row">
            <el-text class="show">我们是一群对品牌、对设计有着执着追求，更懂新人群、新消费、新零售！我们不忘初心，不断学习、总结、改进，致力于引领新品牌的潮酷设计。</el-text>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 九宫格作品展示 -->
    <div class="warpper" style="margin-top: 20px;">
      <CaseWorks :caseArray="caseArray" v-if="caseArray"></CaseWorks>
    </div>
    <!-- More  按钮 -->
    <div class="case-more" @mouseout="ChangeIconFlag(false)" @mouseover="ChangeIconFlag(true)">
      <TransitionGroup name="list" appear>
        <span class="span1 tran" >More</span>
        <span class="span2 tran" v-if="iconFlag">
          <ArrowRight  style="width: 1em; height: 1em; margin-right: 8px" />
        </span>
      </TransitionGroup>
    </div>
    <!-- 设计咨询 -->
    <div class="warpper2" style="margin-bottom: 160px;" v-if="ideaList">
      <div class="warpper4">
        <el-row :gutter="80">
          <el-col :lg="12" :sm="24">
            <div style="background-color: #888;">
              <img style="width:100%;height:100%;object-fit: cover;" src="http://dtxb.work/7e44860e8629f50a.png"
                alt="设计咨询加载失败">
            </div>
          </el-col>
          <el-col :lg="12" :sm="24">
            <div class="opinion">
              <p class="big-title">设计资讯 / </p>
              <h2 class="title">6个困扰多年的设计细节问题, 今天终于找到原因了!</h2>
              <p>6个困扰多年的设计细节问题, 今天终于找到原因了!......</p>
              <p class="hover tran">+阅读更多</p>
              <hr class="hr" />
              <el-row :gutter="20" v-if="headerNav">
                <el-col :span="12">
                  <ul>
                    <li v-for="idea in ideaList" @click="router.push('/ideaDetail/' + idea.id)">{{idea.title}}</li>
                  </ul>
                </el-col>
                <el-col :span="12">
                  <ul>
                    <li v-for="idea in ideaList2" @click="router.push('/ideaDetail/' + idea.id)">{{idea.title}}</li>
                  </ul>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="!headerNav">
                <el-col>
                  <ul>
                    <li v-for="idea in ideaList" @click="router.push('/ideaDetail/' + idea.id)">{{idea.title}}</li>
                  </ul>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
  <!-- 轮换背景图片 -->
  <div ref="serviceBannerRef" class="serviceBanner" v-if="headerNav" :style="{ height: bannerHeight + 'px' }">
    <h1 style="color: #1d1d1f;">懂美学 ，更懂生意</h1>
    <div class="button" @click="router.push('/about')">
      <span>我们在什么样的前提下为你服务</span>
      <span class="icon">
        <el-icon>
          <Right style="font-size: 20px;width: 100px ;height: 100px; margin-right: 8px" />
        </el-icon>
      </span>
    </div>
  </div>
  <!-- our news -->
  <!-- <div class="our-news  warpper2 warpper3" v-if="headerNav">
    <div class="warpper">
      <p>
        <a href="https://www.baidu.com">
          <img src="../assets/OurNews.png" />
        </a>
      </p>
    </div>
    <div class="warpper content">
      <el-row>
        <el-col :sm="24" :lg="8" class="border">
          <a href="https://www.baidu.com" target="_blank">
            <img class="tran2" src="../assets/16536360313.jpg" alt="图片" data-original="../assets/OurNews.png">
            <div class="date tran">
              5-27
            </div>
            <div class="news-text tran">
              <el-text class="news-text-title" truncated>
                用10000字讲透新锐品牌自有IP塑造方法论【汤臣杰逊品牌研究院】
              </el-text>
              <el-divider />
              <el-text truncated>
                自有IP——新锐品牌的忠实伴侣。
              </el-text>
            </div>
          </a>
        </el-col>
        <el-col :sm="24" :lg="8" class="border"><a href="https://www.baidu.com" target="_blank">
            <img class="tran" src="../assets/16536360313.jpg" alt="图片" data-original="../assets/OurNews.png">
            <div class="date tran">
              5-27
            </div>
            <div class="news-text tran">
              <el-text class="news-text-title" truncated>
                用10000字讲透新锐品牌自有IP塑造方法论【汤臣杰逊品牌研究院】
              </el-text>
              <el-divider />
              <el-text truncated>
                自有IP——新锐品牌的忠实伴侣。
              </el-text>
            </div>
          </a></el-col>
        <el-col :sm="24" :lg="8"><a href="https://www.baidu.com" target="_blank">
            <img class="tran2" src="../assets/16536360313.jpg" alt="图片" data-original="../assets/OurNews.png">
            <div class="date tran">
              5-27
            </div>
            <div class="news-text tran">
              <el-text class="news-text-title" truncated>
                用10000字讲透新锐品牌自有IP塑造方法论【汤臣杰逊品牌研究院】
              </el-text>
              <el-divider />
              <el-text truncated>
                自有IP——新锐品牌的忠实伴侣。
              </el-text>
            </div>
          </a></el-col>
      </el-row>
    </div>
  </div> -->
  <div style="margin-bottom: 100px;" v-if="headerNav">
    <img src="../assets/logqiang.jpg" width="100%">
  </div>
</template>

<style lang="scss" scoped>
@font-face {
  font-family: 'BureauEagleBook';
  src: url('@/assets/fonts/BureauEagleBook.otf') format('truetype');
}

.our-news {
  .content {
    margin-top: 40px;

    .border {
      border-right: #ddd 1px solid;
    }

    a {
      display: block;
      width: 100%;
      float: left;
      position: relative;
      overflow: hidden;

      .date {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fff;
        font-size: 24px;
        padding: 40px 60px;
        font-family: BureauEagleBook;
        color: #888;
        z-index: 10;
      }

      .news-text {
        position: absolute;
        bottom: 0;
        z-index: 10;
        padding: 20px;
        width: 100%;

        .news-text-title {
          font-size: 16px;
          color: #1d1d1f;
        }
      }

      img {
        opacity: 0;
        width: 100%;
        height: auto;
        display: block;
      }
    }

    a:hover {
      .date {
        padding: 20px 30px;
      }

      img {
        opacity: 1;
        transform: scale(1.2);
      }

      .news-text {
        opacity: 0;
        bottom: -40px;
      }
    }
  }
}

.warpper {
  width: 95%;
  margin: 0 auto;
}

.warpper4 {
  width: 80%;
  margin: 40px auto;
}


.serviceBanner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  width: 100%;
  margin-top: 100px;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  .button {
    font-size: 14px;
    padding: 0 60px;
    background-color: #fff;
    color: #1d1d1f;
    height: calc(100% * 0.1);
    position: absolute;
    bottom: calc(100% * 0.25);
    display: flex;
    justify-content: space-between;
    ;
    align-items: center;
    transition: all 0.3s ease;
    a{
      color: #1d1d1f;
    }
    .icon {
      padding-left: 30px;
      font-size: 30px;
    }
    &:hover {
      padding: 0 80px;
      cursor: pointer;
      border: #1d1d1f 1px solid;
      background-color: rgba(255, 255, 255, 0);
    }
  }
  h1 {
    font-size: 72px;
    color: #fff;
  }
}
.warpper3 {
  padding: 50px 0;
  background-color: #f9f9f9;
}

.case-more {
  display: flex;
  justify-content: center;
  margin: 120px auto 180px;
  color: #b9b9b9;
  width: 240px;
  height: 50px;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  border-radius: 0px;
  font-size: 18px;
  text-align: center;
  text-indent: 0px;
  text-indent: 0px;
  line-height: 50px;
  font-size: 13px;
  border: none;
  position: relative;

  &:hover {
    width: 270px;
    cursor: pointer;
    .span1 {
      color: #333;
    }
    .span2 {
      color: #333;
    }
  }

  &:after {
    content: "";
    display: block;
    width: 100%;
    height: 42px;
    border: 1px solid #D9D9D9;
    position: absolute;
    bottom: 2px;
    z-index: 2;
    transition: all 0.2s ease 0s;
  }
}



.warpper2 {
  .opinion {
    padding: 0 20px 20px;

    .big-title {
      color: #414141;
      font-size: 28px;
    }

    .title {
      color: #1d1d1f;
      margin-top: 1.5rem;
      margin-bottom: 2.5rem;
      font-size: 20px;
    }

    .hover {
      color: #1d1d1f;
      cursor: pointer;
      margin: 10px 0;
    }

    .hr {
      margin-top: 2.5rem;
      height: 1px;
      border-bottom: #1d1d1f 1px solid;
      margin-bottom: 1rem;
    }

    ul {
      padding-left: 20px;

      li {
        transition: all .3s ease;
        list-style-type: disc;
        margin: 10px 0;
        &:hover {
          color: #1d1d1f;
          cursor: pointer;
        }
      }

      
    }
  }



  .span1 {
    position: absolute;
    left: 90px;
  }

  .span2 {
    position: absolute;
    opacity: 0;
    right: 90px;
  }




  ul {
    margin: 30px 0;
    width: 100%;

    a {
      display: block;
      width: calc(100% / 3);
      float: left;
      position: relative;
      overflow: hidden;

      li {
        .case-summary {
          opacity: 0;
          transition: all 0.5s ease-in-out;

          span {
            font-size: 24px;
          }

          background-color: rgba($color: #1d1d1f, $alpha: 0.5);
          color: #fff;

          .p2 {
            padding: calc(100% * 0.05);
            position: absolute;
            bottom: 0;
            left: 0;
          }

          padding: calc(100% * 0.05);
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0%;
          left: 0%
        }

        img {
          transition: all 0.5s ease-in-out;
          width: 100%;
          height: auto;
          display: block;
        }
      }
    }

    a:hover {
      li {
        .case-summary {
          opacity: 1;
          transition: all 0.5s ease-in-out;
        }

        img {
          transform: scale(1.2);
        }
      }
    }
  }
}



.banner-item {
  width: 100%;
  height: 100%;
  background: 0 0/100% 100% no-repeat;
  background-attachment: fixed;
}

.box {
  padding: 65px 10px;


  .wrapper {

    max-width: 1080px;
    margin: 0 auto;

    h3 {
      margin-bottom: 60px;
    }

    .row {
      margin: 10px 0;

      .show {
        transition: all 0.3s ease-in-out;
        color: #666;
        font-size: 15px;
      }
    }

    .jieshao {
      cursor: pointer;
    }

    .jieshao:hover .show {
      transition: all 0.3s ease-in-out;
      color: #1d1d1f;
    }
  }
}

.douku-jianjie {
  font-size: 36px;
  color: #4a4a4a;

  .douku-jianjie-img {
    width: 50px;
  }
}


@media screen and (max-width: 960px) {
  .warpper2 .opinion{
    margin-top: 20px;
  }
  .case-more{
    margin: 60px auto 90px;
  }
  .jieshao,
  .douku-jianjie {
    font-size: 14px;

    .douku-jianjie-img {
      width: 30px;
    }
  }

}
.list-move,
/* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform:translateX(-30px)
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
    position: absolute;
}
</style>